<!--  -->
<template>
  <div class="">
    <a-card :bordered="false" class="search-wrapper">
      <div class="search-form-wrapper" ref="search">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-input v-model="queryParam.menuName" allow-clear placeholder="菜单名称">
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
    </a-card>
    <a-card class="table-wrapper">
      <a-button type="primary" size="small" @click="addMenu" style="margin-bottom: 20px">
        新增菜单
      </a-button>
      <a-table
        :loading="tableLoading"
        :columns="columns"
        :pagination="pagination"
        @change="(e) => handle(e)"
        :data-source="tableData || []"
        :scroll="{ y: tableHeight }"
      >
        <!-- 2000 -->
        <span slot="menuName" slot-scope="text, record" class="pointer" @click="editMenu(record)">
          <a-icon type="edit" theme="twoTone" class="mr-10" /> {{ text }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a type="default" @click="del(record)">删除</a>
        </span>
      </a-table>
    </a-card>
    <menu-form ref="menuForm" @on-submit="handle" />
  </div>
</template>

<script>
import { getMenuList, delMenu } from '@/api/system'
import MenuForm from './modal/menuForm.vue'
const columns = [
  {
    title: '菜单名称',
    dataIndex: 'menuName',
    // width: 120,
    scopedSlots: { customRender: 'menuName' }
  },
  {
    title: '菜单编码',
    dataIndex: 'menuCode',
    // width: 200
  },
  {
    title: '菜单URL',
    dataIndex: 'path',
    // width: 120
  },
  {
    title: '父级菜单',
    dataIndex: 'parentName',
    // width: 120
  },
  // {
  //   title: '菜单级别',
  //   dataIndex: 'createTime',
  //   width: 220
  // },
  {
    title: '排序', // 菜单序号
    dataIndex: 'orderNum',
    // width: 120
  },
  {
    title: '操作',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
    dataIndex: 'action',
    width: 120
  }
]
export default {
  components: {
    MenuForm
  },
  data () {
    return {
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      advanced: false,
      queryParam: {
        pageSize: 10,
        pageNum: 1
      },
      tabbarHeight: 420,
      columns,
      act: 'add'
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    tableHeight () {
      return document.body.clientHeight - 220
    }
  },
  activated () {
    this.loadData()
  },
  mounted () {
    this.loadData()
  },
  methods: {
    loadData () {
      this.tableLoading = true
      getMenuList({ ...this.queryParam })
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.rows.map((v) => {
            const { id, menuCode, menuName, orderNum, parentName, path } = v
            return {
              id,
              menuCode,
              menuName,
              orderNum,
              parentName,
              path
            }
          })
          this.pagination.total = res.total
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handle (v) {
      if (v && v.current) {
        if (this.queryParam.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.queryParam.pageNum = v.current
        } else {
          this.queryParam.pageSize = v.pageSize
          this.queryParam.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.queryParam.pageNum = 1
        this.pagination.current = 1
        this.queryParam.pageSize = 10
      }

      this.loadData()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    addMenu () {
      this.$refs.menuForm.open()
    },
    editMenu (info) {
      this.$refs.menuForm.open(info)
    },
    del (info) {
      const vm = this
      this.$confirm({
        title: '删除菜单',
        content: (
          <div>
            {!info.parentName ? (
              <p>
                <span style="color:#FF4E4E">菜单下的子菜单将全部删除无法撤回</span>，是否确认删除？
              </p>
            ) : (
              <p>
                <span style="color:#FF4E4E">菜单删除将无法撤回</span>，是否确认删除？
              </p>
            )}
          </div>
        ),
        onOk () {
          return new Promise((resolve, reject) => {
            delMenu({ id: info.id })
              .then(() => {
                vm.$notification['success']({
                  message: '提示',
                  description: '删除成功'
                })
                vm.loadData()
                resolve()
              })
              .catch(() => {
                return reject(new Error(''))
              })
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
